<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>vue-根据条件进行渲染</title>
		<script src="../js/vue.js"></script>
		<style>

		</style>
	</head>

	<body>

		<div class="test-05">
			<p v-if="ok">if显示</p>
			
			<p v-if="no">if不显示</p>
			<p v-else>不显示(if的else)</p>
			
			<template v-if="ok">
				<b>if模板1</b>
				<p>这是模板1的内容</p>
			</template>
			
			<p v-if=" Math.random() > 0.5">大于0.5的随机数块</p>
			<p v-else>小于0.5的随机数块</p>
			
			<p v-if="type === 'a' ">a</p>
			<p v-else-if="type === 'b' ">b</p>
			<p v-else-if="type === 'c' ">c</p>
			<p v-else>not a/b/c</p>
			
			<template v-if="longinType ==='username'">
				<label>帐户名： <input type="text" placeholder="输入帐户名"/></label>
			</template>
			<template v-else>
				<label>邮箱： <input type="text" placeholder="输入邮箱地址"/></label>
			</template><br />
			<button @click="tollgoLoginType">切换登录方式</button>
			
			<p v-show="ok">show显示【切换元素的display这个CSS属性】</p>
		</div>

		<script>
			var test = {
				ok: true,
				no: false,
				type: "d",
				longinType: "username"
			}
			var vm = new Vue({
				el: ".test-05",
				data: test,
				methods: {
					tollgoLoginType: function() {
						/*(this.longinType === "username") ? this.longinType = "emilename" : this.longinType = "username";*/
						this.longinType = (this.longinType === "username") ?  "emilename" :  "username";
					}
				},
				//计算属性computed
				computed: {

				},
				//侦听属性watch
				watch: {

				}
			});
		</script>
	</body>

</html>